<template>
  <div class="content">
    <div class="center">
      <!-- <div class="center-top">
        <el-row :gutter="40">
          <el-col v-for="(item, index) in tableData" :key="item.id" :span="4">
            <div
              v-if="index < 6"
              class="grid-content bg-purple top-img"
              @click="goDetial(index)"
            >
              <img :src="imgPrefix + item.article.coverUri" alt="">
              <div class="me-ce">
                <div>
                  {{ item.article.title }}
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div> -->
      <div class="center-bottom">
        <div class="center-video">
          <!-- <img src="@/assets/loginImgs/videoImg.png" alt=""> -->
          <div v-if="isShowVideo" class="test_two_box">
            <video
              id="myVideo"
              controls
              preload="auto"
              data-setup="{}"
              class="video-js"
            >
              <source ref="video" :src="imgPrefix + uri" type="video/mp4">
            </video>
          </div>
          <div class="video-title">
            <p>
              {{ title }}
            </p>
          </div>
        </div>
        <div class="desc">
          <div class="desc-top">
            <span>RECOMMEND</span>
          </div>
          <div v-if="!recommendList.length" class="nodata mtNodata">
            <img
              style="width: 30%;"
              src="@/assets/loginImgs/nodata.png"
              alt=""
            >
          </div>
          <div
            v-for="(item, index) in recommendList"
            :key="item.id"
            class="desc-content"
          >
            <div
              v-if="index < 5"
              @click="goCategoryDetial(item.id, item.title)"
            >
              <div class="desc-img">
                <img :src="imgPrefix + item.coverUri" alt="">
              </div>
              <div class="desc-title">
                <p class="p1">
                  {{ item.title }}
                </p>
                <p class="p2">详情请点击</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  helpPage,
  articleRead,
  articleVedioTutorialRecommend
} from '@/api/article';
// import { articleVedioTutorialRecommend } from '@/api/article';
export default {
  data() {
    return {
      recommendList: [],
      tableData: [],
      isShowVideo: false,
      title: '',
      uri: '',
      num: 0
    };
  },
  mounted() {
    // console.log(this.$route.query.num);
    this.num = this.$route.query.num;
    this.goCategoryDetial(this.num);
    this.getRecommend();
  },
  methods: {
    toLink() {
      this.$router.push(`/home/newsDetial?id=1`);
    },
    // goCategoryDetial(id, title) {
    //   this.$router.push({
    //     path: '/home/faq',
    //     query: {
    //       id: id,
    //       title: title,
    //       type: 'other'
    //     }
    //   });
    // },
    getRecommend() {
      articleVedioTutorialRecommend().then((res) => {
        this.recommendList = res.data.data;
      });
    },
    categoryMenu(id) {
      this.loading = true;
      helpPage({
        articleCategoryId: -1,
        beginCreateTime: '',
        endCreateTime: '',
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        title: this.searchName,
        type: 1
      }).then((res) => {
        this.tableData = res.data.data;
        this.initVideo();
        this.total = res.data.totalCount;
        this.loading = false;
      });
    },
    goCategoryDetial(id, title) {
      this.isShowVideo = false;
      articleRead(id).then((res) => {
        if (res.code === 200) {
          this.title = res.data.title;
          this.uri = res.data.uri;
          this.initVideo();
        }
      });
    },
    goDetial(num) {
      this.isShowVideo = false;
      this.uri = this.tableData[num].article.uri;
      this.title = this.tableData[num].article.title;
      this.initVideo();
      this.$router.push({ path: '/home/collegeDetial', query: { num: num }});
    },
    initVideo() {
      // 初始化视频方法
      this.$nextTick(() => {
        this.isShowVideo = true;
        if (this.$refs.video) {
          this.$refs.video.src = this.uri;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.nodata {
  text-align: center;
  margin-top: 50px;
}
p,
span {
  word-wrap: break-word;
}
.content {
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  margin-top: 70px;
  font-family: Segoe UI;
}
::v-deep .video-js {
  width: 100%;
  height: 100%;
  .vjs-big-play-button {
    left: 50% !important;
    top: 50% !important;
    margin-left: -2em;
    margin-top: -1.3em;
  }
}
.center {
  overflow: hidden;
  &-top {
    width: calc(100vw / 1.18);
    margin: calc(100vw / 24) auto calc(100vw / 15.48) auto;
    > div {
      height: calc(100vw / 12);
      .top-img {
        height: calc(100vw / 12);
        border-radius: calc(100vw / 480);
        overflow: hidden;
        position: relative;
        cursor: pointer;
        .me-ce {
          width: 100%;
          position: absolute;
          bottom: 0;
          right: 0;
          left: 0;
          height: calc(100vw / 32);
          background: rgba(0, 0, 0, 0.6);
          color: #fff;
          font-weight: 400;
          line-height: calc(100vw / 32);
          font-size: calc(100vw / 128);
          padding: 0 calc(100vw / 192);
          display: none;
          > div {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
          }
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .top-img:hover .me-ce {
        display: block;
      }
    }
  }
  &-bottom {
    width: 1200px;
    height: 550px;
    display: flex;
    justify-content: space-between;
    margin: 80px auto;
    // margin-top: 110px;
    position: relative;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    .video-title {
      max-width: 1000px;
      // height: 44px;
      color: #02a152;
      border-radius: 4px 4px 0px 0px;
      // position: absolute;
      // top: -44px;
      // left: 0;
      p {
        // color: #ffffff;
        line-height: 44px;
        font-size: 20px;
        padding: 0 25px;
      }
    }
  }
  &-video {
    width: 1019px;
    height: 500px;
    .test_two_box {
      width: 100%;
      height: 100%;
      .video-js {
        width: 100%;
        height: 100%;
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .desc {
    width: 710px;
    margin: 0 0 54px 40px;
    &-top {
      text-align: left;
      // margin-top: calc(100vw / 128);
      border-bottom: 1px solid gainsboro;
      span {
        // padding: calc(100vw / 230) calc(100vw / 96) calc(100vw / 192)
        //   calc(100vw / 96);
        color: #02a152;
        border-radius: 4px 4px 0 0;
        font-size: 22px;
        // color: white;
        line-height: 45px;
      }
    }
    &-content {
      > div {
        padding: 20px 0 0 0;
      }
    }
    // &-content:nth-child(1) {
    //   border-top: 1px solid #e6e6e6;
    // }
    &-img {
      width: 160px;
      height: 84px;
      vertical-align: bottom;
      display: inline-block;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-title {
      height: 84px;
      width: 200px;
      line-height: 19px;
      display: inline-block;
      cursor: pointer;
      padding: 10px;
      .p1 {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
      .p2 {
        font-size: 14px;
        color: #477e9e;
        // color: #666666;
        margin-top: 10px;
      }
    }
  }
}
</style>
